<template>
  <div class="indetailPage" aids="this.aid" :class="{'noScroll':confirmShow}">
    <index-login v-if="isNeedLogin" @complete="complete"></index-login>
    <div class="indetailIntro">
      <div class="imgDiv">
        <!-- <swiper autoplay="true" duration="1000" interval="3000" circular="circular">
           <block v-for="(item, index) in bannerImgUrl" :key="index">
              <swiper-item>
                <image :src="item" class="slide-image"/>
                <image :src="item"  class="slide-image"  mode="widthFix" @load="test()"/>
              </swiper-item>
            </block>
        </swiper> --> 
        <swiper duration="1000" interval="6000"  circular="circular" indicator-dots="true"  @change="aaa($event,bannerImgUrl)"  >
          <block v-for="(item, index) in bannerImgUrl" :key="index">
            <swiper-item  v-if="item.isVideo == 1"> 
              <image  :src="item.bannerUrl"  class="slide-image" mode="widthFix" />
            </swiper-item>
            <swiper-item v-if="item.isVideo == 0"> 
              <video  autoplay initial-time='0.01'  style="width:100%;height:100%" :id="index" :src="item.bannerUrl" class="slide-video"></video>
            </swiper-item>
          </block>
        </swiper>
      </div>
      <div class="imgPrice">
        <div class="priceNum">
          <!-- <p class="nowPrice"><span style="color:red;font-weight:bold;">某宝价:</span><span>￥ {{list.showPrice}}</span></p> -->
          <div class="priceBox" v-if="indexSelectId !==2 && indexSelectId !==6">
             <p class="nowPrice">￥{{ list.sellPrice }}</p>
             <p class="beforePrice" v-if="list.showPrice">￥{{list.showPrice}}</p>
          </div>
          <div class="priceBox" v-if="indexSelectId == 6">
             <p class="nowPrice">￥{{ list.sellPrice }}</p>
             <p class="beforePriceSelected6" v-if="list.showPrice">某宝价:￥{{list.showPrice}}</p>
          </div>
          <div class="priceBox" v-if="indexSelectId == 2">
             <p class="nowPrice">￥{{ list.showPrice }}</p>
             <p class="beforePriceSelected2" v-if="list.sellPrice">堂主价:￥{{list.sellPrice}}</p>
          </div>
        </div>
        <div class="shareBtn" @click="shareIndetail"><img src="/static/images/goods/sharebag.png">分享有<span class='shareSpan'>赚</span></div>
      </div>
      <div class="imgName">
        <p>{{list.name}}</p>
      </div>
    </div>
    <div class="tabAll">
      <ul class="tabLabel">
        <li :class="{'active':currentTab == 0}" @click="handelCurrentTab(0)">
          <p>溯 源<span></span></p>
        </li>
        <li :class="{'active':currentTab == 1}" @click="handelCurrentTab(1)">
          <p>详 情<span></span></p>
        </li>
      </ul>
      <ul class="tabText">
        <!-- 溯源页 -->
        <li :class="{'active':currentTab == 0}">
          <div class='syInfo'>
              <div class="syContent" v-if='syInfo.length > 0'> 
                <div class="syTitel">
                    <img src="/static/images/goods/syTitel.png" alt="">
                </div>
                <div class="syDetailContent" v-for="(item,index) in syInfo" :key="index">
                    <div class="numberBgBox">
                        <div class="numberBg">
                            <img src="/static/images/goods/numberBg.png" alt="">
                            <p>{{ index+1 }}</p>
                        </div>
                        <div class="time">
                            {{ item.dateTime }}
                        </div>
                    </div>
                    <div class="syText">
                        <!-- <div class="border"></div> -->
                        <div class="textDescription">
                            {{ item.description }}
                        </div>
                        <div class="syPicture">     
                            <img :src="item.imageDes" alt="">
                        </div>
                    </div>
                </div>
              </div>
          </div>
          <img class="dilog" v-if='syInfo.length > 0' src="/static/images/goods/houseTitle.png" alt="">
          <img class="bg" v-if="syInfo.length > 0" mode="widthFix" src="https://static.dyxingfu.com/2611567671859.jpg" alt="">
          <div class="noSyInfo" v-else>
              <img src="/static/images/goods/noSyInfo.png" alt="">
          </div>
        </li>
        <!-- 详情页 -->
        <li :class="{'active':currentTab == 1}">
          <div v-if="indetailImgUrl.length > 0">
             <img v-for="(item, index) in indetailImgUrl" :key="index" :src="item" mode="widthFix" >
          </div>
          <div v-else>
              暂无详情
          </div>
        </li>
      </ul>
    </div>
    <created-image v-if="showCreatedImg" :imgUrl="imgUrl" @cancel="cancel"></created-image>
    <indetail-bottom @isScroll="isScroll" :selectId ="selectId"  :confirmShow="confirmShow" :isCollect ="list.isFavorite" :ids="list.productId" :isCancel="isCancel"></indetail-bottom>
  </div>
</template>

<script>
import indexLogin from '@/components/dialog/index-login' 
import confirm from '@/components/indetail-bottom/indetail-confirm'
import indetailBottom from '@/components/indetail-bottom/indetail-bottom'
import createdImage from '@/components/indetail-bottom/created-image'
import {mapGetters} from 'vuex'
import store from '@/vuex/store'
export default {
  components: {
    indexLogin,confirm,indetailBottom,createdImage
  },
  data () {
    return {
      aid: "",//商品的producId
      list: {},
      currentTab: 0,
      bannerImgUrl: [], //详情轮播的图片
      indetailImgUrl: [], //详情下面详情的图片
      confirmShow: false,
      isCollect: false,
      virtualStock: '',//虚拟库存
      showCreatedImg: false,//显示生成海报
      imgUrl:'',//海报的具体链接
      userCode: '',//用户的二维码
      isNeedLogin: false,//是否显示登录的组件
      selectId:'',
      indexSelectId:'',//首页缓存取的分类id
      syInfo:[], //溯源信息
      isCancel:false
    }
  }, 
  computed:{
    ...mapGetters({
      currentcar: 'currentProductCar',
      product: 'currentProduct'
    }),
  },
  onLoad(option){
    console.log('商品详情页的option',option)
    let b = wx.getStorageSync('selectIdNum')
    this.indexSelectId = b
    this.selectId = option.selectId
    this.confirmShow = false
    if(option.unionId){
      this.userCode = decodeURIComponent(option.unionId) //通过二维码进来获取的unionId
      this.aid = option.productId;
    }else{
      this.userCode = ''
      this.aid = option.aid;
    } 
    console.log('setCookie的值',store.state.user.setCookie,)
  },
  onShow(){
    // if(this.isNeedLogin){ //需要登录授权
    //   console.log(111111111)
    // }else{ //不需要登录授权
    //   this.requestData() //商品详情的展示
    //   this.bottomRequestData() //商品详情底部的弹框的初始化
    // }
    let self = this
    self.$http.get('integral/my/integral','','',false).then((res)=>{ 
      if(res.data.code == 0){
       self.requestData()
      }else{
        self.isNeedLogin = true
      }
    })
    
    self.bottomRequestData()
    self.confirmShow = false
    self.showCreatedImg = false
  },
  onUnload(){
    this.list = {}
    this.bannerImgUrl = []
    this.indetailImgUrl = []
  },
  methods: {
    aaa(e,c){
      var id = e.mp.detail.current;
        c.map((item,index)=>{
          if(item.isVideo == true){
            wx.createVideoContext(id+"").play();
          }else{
              wx.createVideoContext(id+"").pause();
          }
        })
    },
    test(){
        // var self = this
        setTimeout(function () {
          //  self.$set(self.testshow, 'tshow',true);
          wx.hideLoading()
        }, 1000);
    },
    complete(){
      this.requestData() //商品详情的展示
      this.bottomRequestData() //商品详情底部的弹框的初始化
    },
    cancel(){
      this.showCreatedImg = false
    },
    shareIndetail(){
      let that = this
      wx.showActionSheet({
        itemList: ['生成海报'],
        success(res) {
          wx.showLoading({ //数据请求前loading，
            title: '生成中',
          })
          that.getImage()
        },
        fail(res) {
          console.log(res.errMsg)
        }
      })
    },
    getImage(){ //生成海报
      this.$http.get(`user/share/product/share?productId=${this.aid}`).then((data)=>{
        wx.hideLoading()
        if(data.data.code == 10){
          this.wxAlert(data.data.msg)
          this.showCreatedImg = false
        }else if(data.data.code == 0){
          this.imgUrl = data.data.data
          this.showCreatedImg = true
        }else if(data.data.code == 3){
          this.isNeedLogin = true
        }
      })  
    },
    toshare(){
      this.confirmShow = true
    },
    tocomfirmshare(){
      let sendShareBuyProduct = {
        productId: this.product.productId,
        formatId: this.product.currentFormatId,
        colorId: this.product.currentProductColorId,
      }
      this.$http.get(`bargains/createBargainOrder/`,sendShareBuyProduct,"application/json").then((data)=>{ 
        // wx.hideLoading()
        wx.setStorageSync('bargainOrderNo',data.data.data)  //缓存订单号
        const url = '/pages/share/main?bargainOrderNo=' + data.data.data;
        wx.navigateTo({ url })
      })
    },
    requestData () { 
      this.$http.get(`products/new/detail/${this.aid}?parentUnionId=${this.userCode}`).then((res)=>{ 
        wx.setStorageSync('parentId',this.userCode)
        let kucun = res.data.data.inventory;//这里是设置虚拟库存
            let productId = res.data.data.productId;//这里是设置虚拟库存  
            if(this.currentcar.length>0){
              this.currentcar.map((item) => { //这里是设置虚拟库存
                  if (item.productId === productId) {
                    this.virtualStock = kucun - item.quantity
                    wx.setStorageSync('virtualStock',this.virtualStock)
                  }else{
                    wx.setStorageSync('virtualStock',kucun)
                  }
              })
            }else{
              wx.setStorageSync('virtualStock',kucun)
            }
            console.log(JSON.stringify(res))
            this.list = res.data.data;
            this.isCancel = res.data.data.isCancel
            wx.setStorageSync('isCancel',res.data.data.isCancel);
            this.bannerImgUrl = res.data.data.bannerUrls;
            this.indetailImgUrl = res.data.data.detailImgUrls;
            if(res.data.data.productSourceResponse){
              this.syInfo = res.data.data.productSourceResponse.productSourceInfoList
            }else{
              this.syInfo = []
            }
      })
    },
    bottomRequestData () {
      this.$http.get(`products/formats/${this.aid}`).then((res)=>{ 
        // wx.hideLoading()
        console.log('商品详情页面底部',res.data.data)
        this.$store.dispatch("getCurrentProduct",res.data.data)
      })
    },
    handelCurrentTab (tab){ //tab切换
      this.currentTab = tab;
    },
    isScroll(val){ //打开弹框以后禁止滚动
      this.confirmShow = val;
    },
    wxAlert(txt){
      wx.showToast({
          title: txt,
          icon: "none",
          duration: 3000,
          mask: true
      })
    }
  },
}
</script>
<style scoped>
.firstEnter{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 100; 
  background: #000;
  opacity: 0.6;
}
.firstEnter .step3{
  position: absolute;
  bottom: 0;
  right: 24rpx;
  width: 221rpx;
  height: 250rpx;
}
.firstEnter .step3 img{
  display: block;
  width: 221rpx;
  height: 146rpx;
}
.firstEnter .step4{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 295rpx;
}
.firstEnter .step4 img{
  display: block;
  width: 100%;
  height: 295rpx;
}
.indetailPage{
  /* background: #efeff4; */
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
}
.noScroll{
  overflow: hidden;
  height: 100%;
}
.indetailIntro{
  background: #fff;
  word-break: break-all;
}
.indetailIntro .imgDiv,.indetailIntro .imgDiv swiper{
  width: 100%;
  height: 580rpx;
}
.indetailIntro .imgDiv img,.indetailIntro .imgDiv swiper swiper-item image{
  width: 100%;
  height: 100%;
}
.indetailIntro .imgPrice{
  padding-left: 30rpx;
  height: 50rpx;
  display: flex;
  margin-top: 50rpx;
}
.indetailIntro .imgPrice .priceNum{
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center; 
  overflow: hidden;
}
.indetailIntro  .imgPrice  .priceBox{
   /* flex: 1; */
  display: flex;
  justify-content: flex-start;
  align-items: center; 
  /* overflow: hidden; */
 }
.indetailIntro .imgPrice .nowPrice{
  display: flex;
  align-items: cneter;
  font-size: 36rpx;
  color: #e55250;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height:50rpx;
  line-height: 50rpx;
  font-weight:500;
}
.indetailIntro .imgPrice .beforePrice{
  font-size: 26rpx;
  color: #898989;
  text-decoration:line-through;
  margin-left: 25rpx;
  height:50rpx;
  line-height: 50rpx;
}

.beforePriceSelected2 {
  font-size: 28rpx;
  color: #FF8106;
  margin-left: 25rpx;
  height:50rpx;
  line-height: 50rpx;
}

.beforePriceSelected6 {
  font-size: 28rpx;
  color: #FF8106;
  text-decoration:line-through;
  margin-left: 25rpx;
  height:50rpx;
  line-height: 50rpx;
}

.indetailIntro .imgPrice .shareBtn{
  font-size: 28rpx;
  color: #898989;
  width: 180rpx;
  height: 50rpx;
  background:rgba(243,243,243,1);
  border-radius: 25rpx 0rpx 0rpx 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.indetailIntro .imgPrice .shareBtn img{
  display: block;
  width: 24rpx;
  height: 27rpx;
  margin-right: 10rpx;
}

.indetailIntro .imgPrice .shareBtn .shareSpan{
  display: block;
  font-size: 32rpx;
  /* width:24rpx;
  height: 27rpx;
  text-align: center;
  line-height: 27rpx; */
  font-weight: bold;

  /* text-align: center;
  width: 24rpx;
  height: 27rpx;
  line-height: 27rpx;
  margin: 0 3rpx; */
}

.indetailIntro .imgName p{
  padding: 0 30rpx;
  font-size: 30rpx;
  color: #000;
  line-height: 80rpx;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.tabAll{
  border-top: 2rpx solid #f3f3f3;
}
.tabLabel{
  display: flex;
  height: 117rpx;
  align-items: center;
  padding: 0 30rpx;
  background: #fff;
}
.tabLabel li{
  height: 117rpx;
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;

}
.tabLabel li p{
  height: 58rpx;
  font-size: 28rpx;
  color: #d2d2d2;
  position: relative;
}
.tabLabel li.active p{
  color: #000;
}
.tabLabel li.active p span{
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -46rpx;
  display: block;
  width: 92rpx;
  height: 3rpx;
  background: #000;
}
.tabText{
  position: relative;
  /* background:url(https://static.dyxingfu.com/2611567671859.jpg) no-repeat;
  width:100%;
  height:100%;
  background-size:100% 100%; */
}
.tabText li{
  display: none;
  font-size: 30rpx;
  color: #414141
}
.tabText li.active{
  display: block;
}

/* .tabText li:first-child {
  background-image: url(https://static.dyxingfu.com/2591567663400.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
} */

.tabText li:last-child img {
  width: 100%;
  display: block;
}

.tabText .noSyInfo {
  width: 218rpx;
  height: 215rpx;
  margin: 200rpx auto 500rpx;
}

.tabText .noSyInfo img {
  width: 218rpx;
  height: 215rpx;
  margin: 200rpx auto 500rpx;
}

.tabText .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: -60rpx;
  z-index: -1;
}

.tabText .dilog {
  position: absolute;
  top: 0;
  left: 0;
  width: 193rpx;
  height: 137rpx;
}

.tabText .syInfo .syContent {
  width: 690rpx;
  margin: 0 auto;
  background: #FDFDFD;
  margin-top: 29rpx;
}

.tabText .syInfo .syTitel {
  width: 404rpx;
  height: 28rpx;
  margin: 0 auto;
  margin-bottom: 100rpx;
}

.tabText .syInfo .syTitel img {
  width: 404rpx;
  height: 28rpx;
  padding-top: 50rpx;
  padding-bottom: 50rpx;
}

.tabText .syInfo .numberBgBox .numberBg {
  width:47rpx;
  height:80rpx;
  position: relative
}

.tabText .syInfo .numberBgBox .numberBg img {
  width:47rpx;
  height:80rpx;
}

.tabText .syInfo .numberBgBox .numberBg p {
  /* font-weight: bold; */
  color: #fff;
  font-size: 32rpx;
  position: absolute;
  top: 26%;
  left: 22%;
}

.tabText .syInfo .syDetailContent {
  margin-left: 19rpx;
  margin-right: 19rpx;
  padding-bottom: 72rpx;
}

.tabText .syInfo .syDetailContent .numberBgBox {
  display:flex;
  align-items: center;
}

.tabText .syInfo .syDetailContent .numberBgBox .time {
  margin-bottom: 10rpx;
  margin-left: 28rpx;
}

.tabText .syInfo .syDetailContent .syText {
  margin-left: 18rpx;
  border-left: 3rpx solid red;
  padding-left: 50rpx;
}

.tabText .syInfo .syDetailContent .syText  .textDescription{
  margin-bottom: 26rpx;
}

.tabText .syInfo .syDetailContent .syText .syPicture {
  width: 539rpx;
  height: 267rpx;
}

.tabText .syInfo .syDetailContent .syText .syPicture img {
  width: 539rpx;
  height: 267rpx;
}

.footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 120rpx;
  display: flex;
  background: #fff;
}
.footer .dlAll{
  display: flex; 
  align-items: center;
  font-size: 22rpx;
  color: #9e9e9e;
  flex: 1;
  margin: 0 30rpx;
}
.footer .dlAll dl{
  flex: 1;
  text-align: center
}
.footer .dlAll dl img{
  width: 36rpx;
  height: 36rpx;
}
.footer ul{
  display: flex;
  margin-right: 20rpx;
  padding-top: 20rpx;
}
.footer ul li{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 230rpx;
  height: 80rpx;
  color: #fff;
  font-size: 32rpx;
}
.footer ul li:first-child{
  background: #e1c7d2;
  border-radius: 6rpx 0 0 6rpx;
}
.footer ul li:last-child{
  background: #aad1d6;
  border-radius: 0 6rpx 6rpx 0;
}

</style>
